<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详细页</title>
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

</head>
<body class="grey">
<div class="headerBar">
    <div class="topBar">
        <div class="comWidth">
            <div class="leftArea">
                <a href="#" class="collection">收藏慕课</a>
            </div>
            <div class="rightArea">
                欢迎来到慕课网！<a href="#">[登陆]</a><a href="#">[免费注册]</a>

            </div>
        </div>
    </div>
    <div class="logoBar">
        <div class="comWidth">
            <div class="logo fl">
                <img src="images/logo.jpg" alt="慕课网">
            </div>
            <div class="search-box fl">
                <input class="search-text fl" type="text" >
                <input class="search-btn fr" type="button" value="搜索" >
            </div>
            <div class="shopCar fr">
                <span class="shopText fl">购物车</span>
                <span class="shopNumber fl">10</span>
            </div>
        </div>
    </div>
    <div class="nav-box">
        <div class="comWidth">
            <div class="shopClass fl">
                <h3>全部商品分类<i></i></h3>
                <div class="shopClass-show hide">
                    <dl class="shopClass-item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>
                    <dl class="shopClass-item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>
                    <dl class="shopClass-item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>
                    <dl class="shopClass-item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>
                    <dl class="shopClass-item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#" class="aLink">合约机</a>
                        </dt>
                        <dd>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dd>
                    </dl>
                </div>
                <div class="shopClass-list hide">
                    <div class="shopList-content">
                    <dl class="shopList-item">
                            <dt>电脑装机</dt>
                            <dd>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                            </dd>
                    </dl>
                    <dl class="shopList-item">
                            <dt>电脑装机</dt>
                            <dd>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                            </dd>
                    </dl>
                    <dl class="shopList-item">
                            <dt>电脑装机</dt>
                            <dd>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                            </dd>
                    </dl>
                    <dl class="shopList-item">
                            <dt>电脑装机</dt>
                            <dd>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                            </dd>
                    </dl>
                    <dl class="shopList-item">
                            <dt>电脑装机</dt>
                            <dd>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                                <a href="#">文字</a>
                            </dd>
                    </dl>
                        <div class="shopList-links">
                            <a href="#">文字测试内容<span></span></a>
                            <a href="#">文字测试内容<span></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="nav fl">
                <li><a href="#" class="active" >数码城</a> </li>
                <li><a href="#">天黑黑</a> </li>
                <li><a href="#">团购</a> </li>
                <li><a href="#">发现</a> </li>
                <li><a href="#">二手特卖</a> </li>
                <li><a href="#">名品会</a> </li>
            </ul>
        </div>
    </div>
</div>
<div class="userPosition comWidth">
    <strong><a href="#">首页</a></strong>
    <span>&nbsp;&gt;&nbsp;</span>
    <a href="#">电脑</a>
    <span>&nbsp;&gt;&nbsp;</span>
    <a href="#">戴尔</a>
    <span>&nbsp;&gt;&nbsp;</span>
    <em>M5110</em>
</div>
<div class="description-info comWidth">
    <div class="description clearfix">
    <div class="leftArea">
        <div class="description-imgs">
            <div class="big">
                <img src="images/des.jpg" alt="手机">
            </div>
            <ul class="des-sm-img clearfix">
                <li><a href="#"><img src="images/des-sm-1.jpg" class="active"> </a> </li>
                <li><a href="#"><img src="images/des-sm-2.jpg"> </a> </li>
                <li><a href="#"><img src="images/des-sm-1.jpg"> </a> </li>
                <li><a href="#"><img src="images/des-sm-2.jpg"> </a> </li>
                <li><a href="#"><img src="images/des-sm-1.jpg"> </a> </li>

            </ul>
        </div>

    </div>
    <div class="rightArea">
        <div class="des-cont">
            <h3 class="des-cont-title">全网最低价苹果手机</h3>
            <div class="dl clearfix">
                <div class="dt">慕课价</div>
                <div class="dd"><span class="des-money"><em>$</em>888</span></div>
            </div>
            <div class="dl clearfix">
                <div class="dt">优惠</div>
                <div class="dd"><span class="hg"><i class="hg-icon">换购</i>购IPad送插座</span></div>
            </div>
            <div class="des-position">
                <div class="dl clearfix">
                    <div class="dt">送到</div>
                    <div class="dd clearfix">
                    <div class="select">
                        <h3> 海淀区五环内</h3>
                        <span></span>
                        <ul class="show-select">
                            <li>上帝</li>
                            <li>上帝</li>
                            <li>上帝</li>
                        </ul>
                    </div>
                       <span class="theGoods">有货，可当日出货</span>
                    </div>
                </div>
                <div class="dl clearfix">
                    <div class="dt color-select">选择颜色</div>
                    <div class="dd clearfix">
                      <div class="des-item des-item-active">
                          WIFI 16G
                      </div>
                        <div class="des-item">
                            WIFI 16G
                        </div>
                        <div class="des-item">
                            WIFI 16G
                        </div>
                    </div>
                </div>
                <div class="dl clearfix">
                    <div class="dt des-select-more">选择版本</div>
                    <div class="dd clearfix ">
                        <div class="des-item des-item-active des-item-sm">
                            WIFI 16G
                        </div>
                        <div class="des-item des-item-sm">
                            WIFI 16G
                        </div>
                        <div class="des-item des-item-sm">
                            WIFI 16G
                        </div>
                        <div class="des-item  des-item-sm">
                            WIFI 16G
                        </div>
                        <div class="des-item des-item-sm">
                            WIFI 16G
                        </div>
                        <div class="des-item des-item-sm">
                            WIFI 16G
                        </div>
                        <div class="des-item  des-item-sm">
                            WIFI 16G
                        </div>
                        <div class="des-item des-item-sm">
                            WIFI 16G
                        </div>
                        <div class="des-item des-item-sm">
                            WIFI 16G
                        </div>
                    </div>
                </div>
                <div class="dl clearfix">
                    <div class="dt des-num">数量</div>
                    <div class="dd clearfix">
                        <div class="des-number">
                            <div class="reduce">-</div>
                            <div class="des-input">
                                <input type="text">
                            </div>
                            <div class="plus">+</div>
                        </div>
                        <span class="xg">限购<em>9</em>件</span>
                    </div>

                </div>


            </div>
            <div class="des-select">
                已选择<span>"白色16G"</span>
            </div>
            <div class="shop-buy">
                <a href="#" class="shopping-btn"></a>
                <span class="line"></span>
                <a href="#" class="buy-btn"></a>
            </div>
            <div class="notes">
                注意：此商品可提供普通发票，不提供增值税发票。
            </div>
        </div>

    </div>
    </div>
</div>
<div class="hr15"></div>

<div class="des-info comWidth clearfix">
    <div class="leftArea">
        <div class="recommend">
            <h3 class="tit">同价位</h3>
            <div class="item">
                <div class="item-cont">
                    <div class="img-item">
                        <a href="#"><img src="images/htc.jpg" alt=""></a>
                    </div>
                    <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">$888</p>
                </div>
            </div>
            <div class="item">
                <div class="item-cont">
                    <div class="img-item">
                        <a href="#"><img src="images/htc.jpg" alt=""></a>
                    </div>
                    <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">$888</p>
                </div>
            </div>
            <div class="item">
                <div class="item-cont">
                    <div class="img-item">
                        <a href="#"><img src="images/htc.jpg" alt=""></a>
                    </div>
                    <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">$888</p>
                </div>
            </div>
        </div>
        <div class="hr15"></div>
        <div class="recommend">
            <h3 class="tit">看了还买</h3>
            <div class="item">
                <div class="item-cont">
                    <div class="img-item">
                        <a href="#"><img src="images/htc.jpg" alt=""></a>
                    </div>
                    <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">$888</p>
                </div>
            </div>
            <div class="item">
                <div class="item-cont">
                    <div class="img-item">
                        <a href="#"><img src="images/htc.jpg" alt=""></a>
                    </div>
                    <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">$888</p>
                </div>
            </div>
            <div class="item">
                <div class="item-cont">
                    <div class="img-item">
                        <a href="#"><img src="images/htc.jpg" alt=""></a>
                    </div>
                    <p><a href="#"> 文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍</a></p>
                    <p class="money">$888</p>
                </div>
            </div>
        </div>
    </div>
    <div class="rightArea">
        <div class="des-infoContent">
            <ul class="des-tit">
                <li class="active"><span>产品介绍</span></li>
                <li><span>商品评价(123456)</span></li>
            </ul>
            <div class="ad">
                <a href="#"> <img src="images/ad1.jpg" alt="AD"></a>
            </div>
            <div class="info-text">
            <div class="info-tit">
                <h3>强烈推荐</h3>
                <h4>货比三家</h4>
            </div>
                <p>
                    现在就是买mini的好时候！换代清仓直降，但苹果品质不变！A5双核，内置Lightning闪电接口，正反可插，方便人性。
                    小身材，炫丽的7.9英寸显示屏，7.2mm的厚度，薄如铅笔。女生包包随身携带更时尚！facetime视频通话，与密友24小时畅聊不断线。
                    微信倾力打造，你的智能助理。苹果的牌子就不用我说了，1111补仓，存货不多哦！
                </p>
                <div class="hr45"></div>

                <div class="info-tit">
                    <h3>强烈推荐</h3>
                    <h4>货比三家</h4>
                </div>
                <p>
                    现在就是买mini的好时候！换代清仓直降，但苹果品质不变！A5双核，内置Lightning闪电接口，正反可插，方便人性。
                    小身材，炫丽的7.9英寸显示屏，7.2mm的厚度，薄如铅笔。女生包包随身携带更时尚！facetime视频通话，与密友24小时畅聊不断线。
                    微信倾力打造，你的智能助理。苹果的牌子就不用我说了，1111补仓，存货不多哦！
                </p>
                <div class="hr45"></div>
                <img src="images/ad2.jpg" alt="ad2" class="center">
                <div class="hr45"></div>
            </div>
        </div>
        <div class="hr15"></div>
        <div class="des-infoContent">
            <h3 class="shopDes-tit">商品评价</h3>
            <div class="score-box clearfix">
                <div class="score">
                    <span>4.7</span><em>分</em>
                </div>
                <div class="score-speed">
                    <ul class="score-speed-text">
                        <li class="speed-1">非常不满意</li>
                        <li class="speed-2">不满意</li>
                        <li class="speed-3">一般</li>
                        <li class="speed-4">满意</li>
                        <li>非常满意</li>
                    </ul>
                    <div class="score-num">
                        4.7<i></i>
                    </div>
                    <p>共有6666666人评价</p>

                </div>
            </div>
            <div class="review-tab">
                <ul class="review fl">
                    <li><a href="#" class="active">全部</a> </li>
                    <li><a href="#">满意（3212）</a> </li>
                    <li><a href="#">一般（3212）</a> </li>
                    <li><a href="#">不满意（3212）</a> </li>
                </ul>
                <div class="review-sort fr">
                    <a href="#" class="review-time">时间排序</a>
                    <a href="#" class="review-reco">推荐排序</a>
                </div>
            </div>
            <div class="review-list clearfix">
                <div class="review-list-box">
                <div class="review-userHead fl">
                    <div class="review-user">
                        <img src="images/userhead_03.jpg" alt="头像">
                        <p>62****09</p>
                        <p>金色会员</p>
                    </div>
                </div>
                <div class="review-cont">
                    <div class="review-top clearfix">
                    <div class="starBox fl">
                        <span class="star"></span>
                        <span class="star"></span>
                        <span class="star"></span>
                        <span class="star"></span>
                        <span class="star"></span>
                    </div>
                        <span class="star-text fl">
                            5分 满意
                        </span>
                    </div>
                    <p>
                        文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
                        文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
                        文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
                    </p>
                    <p>
                        <a href="#" class="ding">顶（2）</a>
                        <a href="#" class="cai">踩 （2）</a>
                    </p>
                </div>
                </div>

                <div class="review-list-box">
                    <div class="review-userHead fl">
                        <div class="review-user">
                            <img src="images/userhead_03.jpg" alt="头像">
                            <p>62****09</p>
                            <p>金色会员</p>
                        </div>
                    </div>
                    <div class="review-cont">
                        <div class="review-top clearfix">
                            <div class="starBox fl">
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                            </div>
                            <span class="star-text fl">
                            5分 满意
                        </span>
                        </div>
                        <p>
                            文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
                            文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
                            文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分文字内容部分
                        </p>
                        <p>
                            <a href="#" class="ding">顶（2）</a>
                            <a href="#" class="cai">踩 （2）</a>
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<div class="hr25"></div>
<div class="footer">
    <p>
        <a href="#">慕课简介</a>
        <i>|</i>
        <a href="#">慕课公告</a>
        <i>|</i>
        <a href="#">招贤纳士</a>
        <i>|</i>
        <a href="#">联系我们</a>
        <i>|</i>客服热线400-675-1234
    </p>
    <p>
        Copyright© 2006 - 2014 慕课版权所有&nbsp;&nbsp;&nbsp;京ICP备09037834号&nbsp;&nbsp;&nbsp;
        京ICP证B1034-8373号&nbsp;&nbsp;&nbsp;某市公安局XX分局备案编号：123456789123
    </p>
    <p class="web">
        <a href="#"><img src="images/footer-logo1.jpg" alt="footer-logo"> </a>
        <a href="#"><img src="images/footer-logo1.jpg" alt="footer-logo"> </a>
        <a href="#"><img src="images/footer-logo1.jpg" alt="footer-logo"> </a>
        <a href="#"><img src="images/footer-logo1.jpg" alt="footer-logo"> </a>
    </p>
</div>
</body>
</html>